<template>
	<view :class="['page',{'iphoneX':isIphoneX}]"> 
		<c-header>
			<view class="header" slot="header">
				<view class="title">消息中心</view> 
			</view>
		</c-header>
		<view  class="body">
			<view class="h45">
				<view class="fix-wrap"> 
					<view class="h45 limit-tab">
						<view class="item" :class="{'active':item.key==select_filter.key&&item.id==select_filter.id}" v-for="(item,index) in fliter_data" :key="index" @click="changeType(index)">
							<view class="name">{{item.name}}</view>
							<view class="active-line"></view>
						</view> 
					</view>
				</view>
			</view>
			<!-- <c-loading v-if="loadingState.default" :loadingState="loadingState"></c-loading> -->
			
			<template >
				<template v-if="list.length>0">
					<view class="sp-list-wrap">
						<view class="item" v-for="(item,index) in list" :key="index" @click="read(index)">
							<view class="title">{{item.msg_type==1?'审批消息':'消息通知'}}</view>
							<view class="content split-line">{{item.content}}</view>
							<view class="time">{{item.create_time}}</view>
							<view class="bottom">
								<view class=""> </view>
								<view class="right"> 
									<view v-if="item.is_read==0" class="f-blue">未读</view>
									<view class="iconfont f-grey f-s30">&#xe8d4;</view>
								</view>
							</view>
						</view>
						<c-loading :loadingState="loadingState"></c-loading>
					</view>
					<!-- <view class="msg-type-list"> 
						<navigator :url="'/package_msg/msg-list/msg-list?type='+item.id" hover-class="none" class="item" v-for="(item,index) in list" :key="index">
							<view class="icon">
								<image v-if="item.id==0" src="@/static/images/sp_icon.png" mode="widthFix"></image>
								<image v-if="item.id==1" src="@/static/images/db_icon.png" mode="widthFix"></image>
								<image v-if="item.id==2" src="@/static/images/hk_icon.png" mode="widthFix"></image>
								<image v-if="item.id==3" src="@/static/images/zp_icon.png" mode="widthFix"></image>
								<image v-if="item.id==4" src="@/static/images/xx_icon.png" mode="widthFix"></image>
								<image v-if="item.id==5" src="@/static/images/yqsq_icon.png" mode="widthFix"></image>
							</view>
							<view class="content">
								<view class="left">
									<view class="ft">
										<view class="name">{{item.name}}</view> 
									</view>
									<view class="fb">{{item.count>0?'您有'+item.count+'条消息未读':'暂无最新消息'}}</view>
								</view>
								<view v-if="item.count>0" class="new-num">{{item.count}}</view>
							</view>
						</navigator>					 
					</view> -->
				</template> 
				
				<c-empty v-else></c-empty>
			</template>
		</view> 
		
		<c-nav-caigou :switchTab="2"></c-nav-caigou>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isLogin:false, 
				isIphoneX:getApp().globalData.isIphoneX,
				
				list:[],
				total:0,
				select_filter:{
					name:'消息',
					id:'0',
					key:'type'
				},
				fliter_data:[
					{
						name:'消息',
						id:'0',
						key:'type'
					},
					{
						name:'抄送',
						id:'1',
						key:'type'
					},
					// {
					// 	name:'未读',
					// 	id:'0',
					// 	key:'is_read'
					// },
					// {
					// 	name:'已读',
					// 	id:'1',
					// 	key:'is_read'
					// },
					// {
					// 	name:'审批',
					// 	id:'1',
					// 	key:'msg_type'
					// },
					// {
					// 	name:'通知',
					// 	id:'2',
					// 	key:'msg_type'
					// }
				],
				loadingState:{
					default:false,
					loading:false,
					completed:false
				},
				params:{
					page:1,
					limit:15,
					type: '-1',    // 分类(0=消息,1=抄送)
					is_read: '-1' ,
					msg_type:'-1',
				}
			}
		},
		onLoad() { 
			this.isLogin=this.$loginState('check');
			this.getMessageList()		
		},
		onShow() {
			
		},
		onReachBottom(){
			if(this.loadingState.completed){ 
				this.params.page=1;
				return false
			}else{
				this.params.page++;
				this.getMessageList(); 
			}	 
		},
		methods: {
			changeType(idx){
				this.select_filter=this.fliter_data[idx];
				this.list=[]; 
				this.params.page=1;
				this.params[this.select_filter.key]=this.select_filter.id;  
				this.getMessageList()
			}, 
			async getMessageList(){ 
				let res=await this.$api.user_api.procuremsgList(this.params);  
				 console.log(res)
				if(res.data.code==200){  
					this.list=this.list.concat(res.data.data.list);	
					if(res.data.data.list.length<=15){
						this.loadingState.completed=true;
					} 
				}
			}, 
			async read(idx){
				let id=this.list[idx].id,
					procure_id=this.list[idx].procure_id,
					to_uid=this.list[idx].to_uid,
					msg_type=this.list[idx].msg_type;
				let res=await this.$api.user_api.procuremsgread({
					id:id
				}) 
				if(res.data.code==200){
					this.list[idx].is_read=1;
				}
				uni.navigateTo({
					url:`/package_caigou/created_step-1/created_step-1?msg_type=${msg_type}&type=detail&id=${procure_id}&to_uid=${to_uid}`
				})
			}
		},
		computed:{
			list_update(){
				return this.$store.state.caigou_msg_list;
			}
		},
		watch:{
			list_update(newer,older){ 
				if(newer!=older){
					this.list=[]; 
					this.getMessageList();
				}
			} 
		}
	}
</script>

<style lang="less">
	.page{
		// background: #fff;
	} 
	// 审批列表
	.sp-list-wrap{
		padding:20rpx 30rpx;
		.item{
			padding:20rpx 0;
			margin-bottom: 30rpx;
			background: #fff;
			box-shadow: 0 0 10rpx #ddd;
			border-radius: 10rpx;
			.title{
				margin-bottom: 10rpx;
				padding:0 20rpx;  
				font-size: 30rpx;
			}
			.content{
				padding:0 20rpx;
				margin-bottom: 20rpx;
				font-size: 28rpx;
				color:#999;
			}
			.time{
				padding:0 15rpx 15rpx;
				text-align: right;
				font-size: 28rpx;
				color:#999;
			}
			.bottom{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding:15rpx 20rpx 0;
				border-top: 1rpx solid #eee;
				font-size: 24rpx;
				.right{
					display: flex;
					align-items: center;
				}
			}
		}
	}
	.msg-type-list{
		// padding: 20rpx 0 0;
		background: #fff;
		margin-bottom: 20rpx;
		.item{
			display: flex;
			align-items: center;
			padding:0 0 0 20rpx;
			.icon{
				width: 80rpx;
				height: 80rpx;
				flex-shrink: 0;
				margin-right: 20rpx; 
				image{
					width: 100%;
				}
			}
			.content{
				display: flex;
				align-items: center;
				flex-grow: 2;
				padding:25rpx 20rpx 25rpx 0;
				border-bottom: 1rpx solid #eee; 
				.left{
					flex-grow: 2;
					.ft{
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 8rpx;
						.name{
							font-size: 30rpx;
							font-weight: bold;
						}
						.time{
							color:#999;
							font-size: 28rpx;
						}
					}
					.fb{
						font-size: 28rpx;
						color:#999;
					}
				}
				.new-num{
					flex-shrink: 0;
					min-width: 40rpx;
					height: 40rpx;
					text-align: center;
					line-height: 40rpx;
					background-color: #f00;
					border-radius: 50%;
					font-size: 26rpx;
					color:#fff;
				}
				
			}
		}
	}
</style>
